<script lang="ts" setup name="Goods">
  import useStore from '@/store'
  import { storeToRefs } from 'pinia'
  import { ref, watchEffect } from 'vue'
  import { useRoute } from 'vue-router'
  import GoodsImage from './components/goods-image.vue'
  import GoodsSales from './components/goods-sales.vue'
  import GoodsName from './components/goods-name.vue'
  import GoodsSku from './components/goods-sku.vue'
  import GoodsDetail from './components/goods-detail.vue'
  import GoodsHot from './components/goods-hot.vue'
  const { goods } = useStore()
  const route = useRoute()
  watchEffect(() => {
    if(route.path===`/goods/${route.params.id}`&&route.params.id){
      // 清空上一次的商品信息
      goods.resetGoodsInfo()
      // 再重新获取商品信息
      const id = route.params.id as string
      goods.getGoodsInfo(id)
    }
  })
  
  const { info } = storeToRefs(goods)
  const changeSku = (skuId: string) => {
  console.log(skuId)
  const sku = info.value.skus.find((item) => item.id === skuId)
  if (sku) {
    info.value.inventory = sku.inventory
    info.value.price = sku.price
    info.value.oldPrice = sku.oldPrice
  }
}
  // 计数器数据
  const num = ref(1)
  </script>
  
  
  <template>
    <div class="xtx-goods-page">
      <div class="container">
        <!-- 渲染 -->
        <div v-if="info.categories">
          <!-- 面包屑 -->
          <XtxBread>
            <XtxBreadItem to="/">首页</XtxBreadItem>
            <XtxBreadItem :to="`/category/${info.categories[1].id}`">
              {{ info.categories[1].name }}
            </XtxBreadItem>
            <XtxBreadItem :to="`/category/sub/${info.categories[0].id}`">
              {{ info.categories[0].name }}
            </XtxBreadItem>
            <XtxBreadItem>{{ info.name }}</XtxBreadItem>
          </XtxBread>
          <!-- 商品信息 -->
         <!-- 商品信息 -->
          <div class="goods-info" v-if="info.id" >
            <div class="media">
              <GoodsImage :images="info.mainPictures" ></GoodsImage>
              <GoodsSales :goodsInfo="info"></GoodsSales>
            </div>
            <div class="spec">
              <GoodsName :goods="info" />
              <!-- sku组件 -->
              <GoodsSku @changeSku="changeSku" :goodsInfo="info" :skuId="goods.filterSkus[0].id"></GoodsSku>
              <!-- 数字选择框 -->
              <XtxNumbox v-model="num" :min="1" :label="'数量'" :max="10" ></XtxNumbox>
              <!-- 按钮组件 -->
              <XtxButton type="primary" style="margin-top: 20px">
                加入购物车
              </XtxButton>
            </div>
          </div>
          <!-- 商品详情 -->
          <div class="goods-footer">
            <div class="goods-article">
              <!-- 商品+评价 -->
              <div class="goods-tabs">
                <GoodsDetail :goods="info"></GoodsDetail>
              </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">
              <GoodsHot :type="1" />
              <GoodsHot :type="2" />
              <GoodsHot :type="3" />
            </div>
          </div>
        </div>
  
        <!-- 占位的 -->
        <div v-else>
          <!-- 面包屑 -->
          <XtxBread>
            <XtxBreadItem to="/">首页</XtxBreadItem>
          </XtxBread>
          <!-- 商品信息 -->
          <div class="goods-info"></div>
          <!-- 商品详情 -->
          <div class="goods-footer">
            <div class="goods-article">
              <!-- 商品+评价 -->
              <div class="goods-tabs"></div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside"></div>
          </div>
        </div>
      </div>
    </div>
  </template>

<style scoped lang="less">
.goods-info {
  min-height: 600px;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
  }
}
.goods-footer {
  display: flex;
  margin-top: 20px;
  .goods-article {
    width: 940px;
    margin-right: 20px;
  }
  .goods-aside {
    width: 280px;
    min-height: 1000px;
  }
}
.goods-tabs {
  min-height: 600px;
  background: #fff;
}
.goods-warn {
  min-height: 600px;
  background: #fff;
  margin-top: 20px;
}
</style>